<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@include file="../common/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/page.css">

    <title> <spring:message code="class.page.title"/></title>

    <script type="text/javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-32-80; /* -32 顶部主菜单高度，   -90 查询条件高度*/
        }
        function rowDbclick(r){
            $(r).dblclick(
                function() {
                    var columnsArray = $(r).attr('ch').split("_FG$SP_");
                    $("#update-old-file-name-id").val(columnsArray[0]);
                    $("#update-new-file-name-id").val(columnsArray[0]);
                    $("#updateNameDialog").dialog("open");
                    $("#updateUserDailDialog").dialog("open");
                });
        }

        $(function() {
            var addFileNameId = $("#add-file-name-id"),
                addFilePathId = $("#add-file-path-id"),
                addFloderName = $("#add-floderName-id"),
                moveFileName = $("#move-fileName"),
                addFloder = $([]).add(addFloderName),
                moveFile =  $([]).add(moveFileName),
                allFields = $([]).add(addFileNameId).add(addFilePathId);

            resizePageSize();
            $("#file-add-btn-id").click(function (evnent) {
                $("#add-file-form-id").resetForm();
                $("#add-file-dialog-id").dialog('open');
            });
            $("#file-delete-btn-id").click(function (evnent) {
                checkEnter1();
            });
            $("#file-download-btn-id").click(function (evnent) {
                checkEnter2();
            });
            $("#file-copy-btn-id").click(function (evnent) {
                checkEnter3();
            });
            $("#file-share-btn-id").click(function (evnent) {
                checkEnter4();
            });
            // 文件夹弹窗点击事件
            $("#file-add-floder-id").click(function (event) {
                console.log("double click");
                $("#add-floder-form-id").resetForm();
                $("#add-folder-dialog2-id").dialog('open');
        });
            // 分享弹窗
            $("#share-id").dialog(
                {
                    autoOpen : false,
                    width : 400,
                    height : 300,
                    modal : true,
                    resizable : false,
                    title: "<spring:message code='file.share'/>",
                    buttons: [
                        {
                            text: "<spring:message code='common.confirm'/>",
                            click: function() {
                                $( this ).dialog( "close" );

                            }
                        }
                    ]
                }

            );
            // 文件夹弹窗
            $("#add-folder-dialog2-id").dialog({
                autoOpen : false,
                <%--width : 400,--%>
                <%--height : 400,--%>
                modal : true,
                resizable : false,
                title:"<spring:message code = 'file.folder'/>",
                buttons: [
                    {
                        text: "<spring:message code='common.confirm'/>",
                        click: function() {
                            var bValid = true;
                            addFloder.removeClass("ui-state-error");

                            bValid = bValid && checkLength( addFloderName,1,256);
                            if (!bValid){
                                return;
                            }
                            $("#add-floder-form-id").submit();
                        }
                    },
                    {
                        text: "<spring:message code='common.cancel'/>",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            //文件夹异步提交
            $("#add-floder-form-id").ajaxForm({
                dataType:"json",
                // data:{floderName:$("#add-floderName-id").val(),floderFileName:$("#floder-fileName").val()},
                success : function (data) {
                    $("#add-folder-dialog2-id").dialog("close");
                    message(data.msg);
                    $("#flexiGridID").flexReload();
                    // console.log($("#add-floderName-id").val()+"  hh  "+$("#floder-fileName").val());
                },
                error : function () {
                    message("<spring:message code='common.error'/>");
                }
            });

            //文件移动点击事件
            $("#file-move-id").click(function (event) {
                console.log("double click");
                $("#move-file-form-id").resetForm();
                $('#flexiGridID').each(function () {
                    var id = $('.trSelected').children('td').eq(1).children('div').html();
                    // console.log(id);
                    var floderFileNameValue = document.getElementById('move-fileName');
                    floderFileNameValue.value = id;
                    console.log("move-fileName.value:" +floderFileNameValue.value);
                    floderFileName = id;
                });
                $("#move-file-dialog-id").dialog('open');
            });
            // 文件移动弹窗
            $("#move-file-dialog-id").dialog({
                autoOpen : false,
                <%--width : 400,--%>
                <%--height : 400,--%>
                modal : true,
                resizable : false,
                <%--title:"<spring:message code = 'move.file'/>",--%>
                buttons: [
                    {
                        text: "<spring:message code='common.confirm'/>",
                        click: function() {
                            var bValid = true;
                            moveFile.removeClass("ui-state-error");
                            bValid = bValid && checkLength( moveFileName,1,256);
                            if (!bValid){
                                return;
                            }
                            $("#move-file-form-id").submit();
                        }
                    },
                    {
                        text: "<spring:message code='common.cancel'/>",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            //文件移动异步提交
            $("#move-file-form-id").ajaxForm({
                dataType:"json",
                data:{floderName:$("#move-floderName-id").val(),floderFileName:$("#move-fileName").val()},
                success : function (data) {
                    $("#move-file-dialog-id").dialog("close");
                    message(data.msg);
                    $("#flexiGridID").flexReload();
                    // console.log($("#add-floderName-id").val()+"  hh  "+$("#floder-fileName").val());
                },
                error : function () {
                    message("<spring:message code='common.error'/>");
                }
            });

            $("#add-file-dialog-id").dialog({
                    autoOpen : false,
                    width : 400,
                    height : 300,
                    modal : true,
                    resizable : false,
                    title: "<spring:message code='file.add'/>",
                    buttons: [
                        {
                            text: "<spring:message code='common.confirm'/>",
                            click: function() {
                                var bValid = true;
                                allFields.removeClass( "ui-state-error" );

                                // bValid = bValid && checkLength( addFileNameId, 1, 256 );
                                bValid = bValid && checkLength( addFilePathId,  1, 256 );
                                if ( !bValid ) {
                                    return;
                                }
                                $("#add-file-form-id").submit();

                            }
                        },
                        {
                            text: "<spring:message code='common.cancel'/>",
                            click: function() {
                                $( this ).dialog( "close" );
                            }
                        }
                    ]
                }
            );
            $("#add-file-form-id").ajaxForm(
                {
                    dataType: "json",
                    success : function(data) {
                        $("#add-file-dialog-id").dialog( "close" );
                        message(data.msg);
                        $("#flexiGridID").flexReload();
                    },
                    error : function() {
                        message("<spring:message code='common.error'/>");
                    }
                }
            );
            $( "#updateNameDialog" ).dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: "<spring:message code='common.update.title'/>",
                buttons: [
                    {
                        text: "<spring:message code='common.confirm'/>",
                        click: function() {
                            $("#updateNameFormId").submit();
                        }
                    },
                    {
                        text: "<spring:message code='common'/>",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $('#updateNameFormId').ajaxForm({
                dataType: "json",
                success : function(data) {
                    $('#flexiGridID').flexReload();
                    $("#updateNameDialog").dialog( "close" )
                },
                error : function() {
                    message("<spring:message code='common.error'/>");
                },
                complete : function(response, status) {

                }
            });

            var _columnWidth= (_gridWidth-150)/10;
            $("#flexiGridID").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : "${pageContext.request.contextPath}/file/getFileInfolist",
                dataType : 'json',
                colModel : [
                    {display : "<spring:message code='file.name'/>",name : 'objectKey',width : _columnWidth*3, sortable : false,align : 'center'},
                    <%--{display : "<spring:message code='file.name'/>",name : 'objectKey',width : _columnWidth*6, sortable : false,align : 'left',process: function(v,_trid,_row) {--%>

                    <%--        var htmlContents ='<a style="color:blue;cursor:pointer;" href="#" onclick="queryFile(this);">';--%>
                    <%--        if(v.substr(v.length-1,1) === "/"){--%>
                    <%--            htmlContents =htmlContents + '<i class="glyphicon glyphicon-folder-close" style="color: #F0DA72"></i><span style="padding-left: 0px;">';--%>
                    <%--            htmlContents +=  v.substr(0,v.length-1) + '<span></a>';--%>

                    <%--        }else{--%>
                    <%--            htmlContents =htmlContents + '<i class="glyphicon glyphicon-file" style="color: #A9A9A9"></i><span style="padding-left: 0px;">';--%>
                    <%--            htmlContents += v + '<span></a>';--%>
                    <%--        }--%>

                    <%--        return htmlContents;--%>
                    <%--    }},--%>
                    {display : "<spring:message code='file.content.length'/>",name : 'contentLength',width : _columnWidth*3, sortable : false,align : 'center'},
                    {display : "<spring:message code='file.modify.time'/>",name : 'lastModified',width : _columnWidth*3, sortable : false,align : 'center'},
                    <%--{display : "<spring:message code='file.operation'/>",name : 'objectKey',width : _columnWidth, sortable : true,align : 'center',process: function(v,_trid,_row) {--%>
                    <%--        var htmlContents ='<a style="color:blue;cursor:pointer;" href="${pageContext.request.contextPath}/file/download/'+_row.objectKey+ '" target="_blank"><spring:message code="file.download"/></a>';--%>
                    <%--        return htmlContents;--%>
                    <%--    }},--%>
                    <%--{display : "<spring:message code='file.operation'/>",name : 'objectKey',width : _columnWidth, sortable : true,align : 'center',process: function(v,_trid,_row) {--%>
                    <%--        var htmlContents ='<span style="color:blue;cursor:pointer;" onclick="deleteObject(\''+_row.objectKey+'\');"><spring:message code='file.delete'/></span>';--%>
                    <%--        return htmlContents;--%>
                    <%--    }}--%>
                    {display : "<spring:message code='file.operation'/>",name : 'objectKey',width : _columnWidth, sortable : true,align : 'center',process: function(v,_trid,_row) {
                            var htmlContents ='<span style="color:blue;cursor:pointer;" onclick="previewObject(\''+_row.objectKey+'\');"><spring:message code='file.preview'/></span>';
                            return htmlContents;
                        }},

                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : false, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true,
                numCheckBoxTitle : "<spring:message code='common.selectall'/>"
            });
            query();

        });
        function query(param1){
            $('#flexiGridID').flexOptions({
                newp: 1,
                extParam: param1||[]
            }).flexReload();
        }

        function deleteObject(objectKey) {//删除组件
            console.log(objectKey);
            $.ajax({
                type : 'POST',
                url : '${pageContext.request.contextPath}/file/delete/'+objectKey+'',
                dataType : 'json',
                cache : false,
                data : {},
                success : function(data) {
                    message("<spring:message code='file.delete.success'/>");
                    $("#flexiGridID").flexReload();
                },
                error : function() {
                    message("<spring:message code='file.delete.fail'/>");
                }
            });
        }
        function downloadObject(objectKey) {//下载组件
            // console.log(objectKey);
            document.location.href = "${pageContext.request.contextPath}/file/download/"+objectKey;
            console.log("objectKey:"+objectKey);
            <%--console.log(objectKey);--%>
            <%--$.ajax({--%>
            <%--    type : 'POST',--%>
            <%--    url : '${pageContext.request.contextPath}/file/download/'+objectKey+'',--%>
            <%--    dataType : 'json',--%>
            <%--    cache : false,--%>
            <%--    data : {},--%>
            <%--    success : function(data) {--%>
            <%--        message("<spring:message code='file.download.success'/>");--%>
            <%--        $("#flexiGridID").flexReload();--%>
            <%--    },--%>
            <%--    error : function() {--%>
            <%--        message("<spring:message code='file.download.fail'/>");--%>
            <%--    }--%>
            <%--});--%>
        }
        function addfolderObject(objectKey) {
            // console.log(objectKey);
            document.location.href = "${pageContext.request.contextPath}/file/addfolder/"+objectKey;
        }
        function copyObject(objectKey) {
            console.log(objectKey);
            $.ajax({
                type : 'POST',
                url : '${pageContext.request.contextPath}/file/copy/'+objectKey+'',
                dataType : 'json',
                cache : false,
                data : {},
                success : function(data) {
                    message("<spring:message code='file.copy.success'/>");
                    $("#flexiGridID").flexReload();
                },
                error : function() {
                    message("<spring:message code='common.error'/>");
                }
            });
        }
        //分享
        function shareObject(objectKey){
            console.log(objectKey);
            $.ajax({
                type : 'POST',
                url : '${pageContext.request.contextPath}/file/share/'+objectKey+'',
                dataType : 'json',
                cache : false,
                data : {},
                success : function(data) {
                    message(data.msg);
                    $("#flexiGridID").flexReload();
                },
                error : function() {
                    message("<spring:message code='common.error'/>");
                }
            });
        }
        function checkEnter1() {
            var selectedData = [];
            selectedData = $("#flexiGridID").getCheckedRows();
            //获取选中行数量
            var x = jQuery('#flexiGridID .trSelected').length;
            //获取选中行文件名
            jQuery('#flexiGridID .trSelected').each(function(i,item){
                //alert(jQuery(item).children().eq(1).text());
                var objectKey = jQuery(item).children().eq(1).text();
                deleteObject(objectKey);
            });
        }

        function checkEnter2() {
            var selectedData = [];
            selectedData = $("#flexiGridID").getCheckedRows();
            //获取选中行数量
            var x = jQuery('#flexiGridID .trSelected').length;
            //获取选中行文件名
            jQuery('#flexiGridID .trSelected').each(function(i,item){
                //alert(jQuery(item).children().eq(1).text());
                var objectKey = jQuery(item).children().eq(1).text();
                downloadObject(objectKey);
            });
        }
        function checkEnter3() {
            var selectedData = [];
            selectedData = $("#flexiGridID").getCheckedRows();
            //获取选中行数量
            //var x = jQuery('#flexiGridID .trSelected').length;
            //获取选中行文件名
            jQuery('#flexiGridID .trSelected').each(function (i, item) {
                //alert(jQuery(item).children().eq(1).text());
                var objectKey = jQuery(item).children().eq(1).text();
                copyObject(objectKey);
            });
        }
        function checkEnter4() {
            var selectedData = [];
            selectedData = $("#flexiGridID").getCheckedRows();
            //获取选中行数量
            //var x = jQuery('#flexiGridID .trSelected').length;
            //获取选中行文件名
            jQuery('#flexiGridID .trSelected').each(function (i, item) {
                //alert(jQuery(item).children().eq(1).text());
                var objectKey = jQuery(item).children().eq(1).text();
                shareObject(objectKey);
            });
        }
        //[Liu]预览主函数
        function previewObject(objectKey) {
            console.log("[Liu Debug]预览文件~previewObject:objectKey="+objectKey);
            console.log();
            $.ajax({
                type : 'POST',
                url : '${pageContext.request.contextPath}/file/preview/'+objectKey+'',
                dataType : 'json',
                cache : false,
                data : {},
                success : function(data) {
                    console.log("[Liu Debug]预览文件~previewObject:objectKey="+objectKey);
                    initPreviewWindow(data.id,data.msg);
                    setCurrentPreviewMode(judgeFileTypeBySuffix(getFileSuffix(objectKey)),data.tempUrl);
                    openPreview();//打开预览窗口

                    $("#flexiGridID").flexReload();
                },
                error : function() {
                    message("<spring:message code='common.error'/>");
                },

            });
        }

        //[Liu]初始化预览窗口
        function initPreviewWindow(key,msg) {
            $("#previewInfo").html("文件ID："+key+"+文件信息："+msg);
        }

        //[Liu]隐藏所有的预览Div
        function hideAllPreviewDiv() {
            document.getElementById("previewImage").style.display="none";
            document.getElementById("previewAudio").style.display="none";
            document.getElementById("previewVideo").style.display="none";
            document.getElementById("previewDoc").style.display="none";
            document.getElementById("previewText").style.display="none";
            document.getElementById("previewUnknown").style.display="none";
        }


        //[Liu]选择正确的预览模式
        function setCurrentPreviewMode(type,path) {
            hideAllPreviewDiv();
            switch (type) {
                case "img":
                    $('#previewImage').css("display","block");
                    $('#preImageSrc').attr("src",path)
                    break;
                case "audio":
                    $('#previewAudio').css("display","block");
                    $('#preAudioSrc').attr("src",path)
                    break;
                case "video":
                    $('#previewVideo').css("display","block");
                    $('#preVideoSrc').attr("src",path)
                    break;
                case "office":
                    $('#preDocSrc').attr("src","https://view.xdocin.com/xdoc?_xdoc="+fixUrlAndSymbolToUtf(path));
                    // $('#preDocSrc').attr("src","https://view.officeapps.live.com/op/view.aspx?src="+fixUrlAndSymbolToUtf(path));
                    $('#previewDoc').css("display","block");
                    break;
                case "text":
                    $('#previewText').css("display","block");
                    //[Liu]报错：被CORS配置阻挡，无法访问
                    //[Liu]好像是因为JS没法跨域抓取HTML
                    //[Liu]Access to XMLHttpRequest at [path] from origin 'https://localhost:8443' has been blocked by CORS policy:
                    //[Liu]No 'Access-Control-Allow-Origin' header is present on the requested resource.
                    // $.get(fixUrlAndSymbolToUtf(path), function(data){
                    //     alert("Data Loaded: " + data);
                    // });
                    // $('#preTextSrc').val(data);
                    $('#preTextSrc').attr("src","https://view.xdocin.com/xdoc?_xdoc="+fixUrlAndSymbolToUtf(path));
                    break;
                case "unknown":
                    $('#previewUnknown').css("display","block");
                    break;
                default:

            }
        }

        //[Liu]修正URL中的&符号为%26
        function fixUrlAndSymbolToUtf(url) {
            let fixUrl=url.replace(/&Expires/, "%26Expires");
            fixUrl=fixUrl.replace(/&Signature/, "%26Signature");
            console.log("[Liu Debug]修正URL格式中的&符号~fixUrlAndSymbolToUtf:修改后url="+fixUrl);
            return fixUrl;
        }

        //[Liu]获取后缀
        function getFileSuffix(path) {
            var index= path.lastIndexOf(".");
            var suffix = path.substr(index+1);
            console.log("[Liu Debug]获取后缀~getFileSuffix:path="+path);
            console.log("[Liu Debug]获取后缀~getFileSuffix:suffix="+suffix);
            return suffix;
        }

        //[Liu]判断文件类型
        function judgeFileTypeBySuffix(suffix) {
            let result = "unknown";
            let imgType = ["jpg","jpeg","bmp","png"];
            let audioType = ["mp3","wav","ogg"]
            let videoType = ["mp4","ogg"];
            let officeType = ["doc","docx","ppt","pptx","xsl","xslx"];
            let textType = ["txt","c","cpp","java","py","jsp","html","htm","css","asp","xml"];
            if(imgType.indexOf(suffix.toLowerCase()) !== -1)
                result = "img";
            if(audioType.indexOf(suffix.toLowerCase()) !== -1)
                result = "audio";
            if(videoType.indexOf(suffix.toLowerCase()) !== -1)
                result = "video";
            if(officeType.indexOf(suffix.toLowerCase()) !== -1)
                result = "office";
            if(textType.indexOf(suffix.toLowerCase()) !== -1)
                result = "text";
            console.log("[Liu Debug]判断类型~judgeFileTypeBySuffix:结果="+result);
            return result;
        }

        //[Liu]通过改变Style隐藏预览窗口并停止所有播放
        function closePreview() {
            $("#preAudioSrc")[0].pause();//暂停音乐
            $('#preVideoSrc').get(0).pause();//暂停视频
            //$('video').trigger('pause'); //关闭所有的视频播放
            const preDiv = document.getElementById("previewWindow");
            preDiv.style.display="none";
        }

        //[Liu]通过改变Style展现预览窗口
        function openPreview() {
            const preDiv = document.getElementById("previewWindow");
            preDiv.style.display="block";
        }

    </script>

    <style type="text/css">
        #fac-a a{
            display: inline-block;
            background-color: transparent;
            padding: .4em 2em .4em 20px;
            position: relative;
            color: 	#FFA500;
        }
        #fac-a  a::after {
            content: "";
            background-color:	#EEE8AA;
            width: 2px;
            height: 70%;
            position: absolute;
            top: 15%;
            right: -1px;
        }
        #fac-a #file-share-btn-id::after{
            display: none;
        }
        #fac-a svg{
            display: inline-block;
            right: 10px;
        }
    </style>
</head>
<body style="display: flex;flex-direction: column;height: 100%;width: 100%;">
<div style="padding-top: 5px;">
    <label><spring:message code="file.name"/>:</label> <input type="text" id="searchRoleName"/>
    <div  style="display: inline-block;vertical-align:middle;background-color: rgba(255,146,0,0.6);border-radius:16px">
    <a href="#" id="file-search-btn-id" class="" style=" color: 	#ffffff;display: inline-block;position: relative; background-color: transparent;padding: .4em 1em .4em 20px;margin-right: 10px">
        <svg t="1626317361131" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21083" width="16" height="16"><path d="M1012.367323 1013.138662c-14.857819 14.481102-38.945217 14.481102-53.805083 0l-152.191814-156.861882c-85.021449 67.221549-193.272445 107.649067-311.291479 107.649067C221.923969 963.927894 0.487798 748.148627 0.487798 481.964971S221.923969 0 495.078946 0c273.15293 0 494.589101 215.779267 494.589101 481.964971 0 124.458037-48.825861 237.532654-128.300965 323.041379l151.00024 155.698972C1027.227189 975.192565 1027.227189 998.66575 1012.367323 1013.138662zM495.078946 97.4347c-231.132552 0-395.233961 159.296214-395.233961 384.528223 0 225.227915 164.103457 384.536413 395.233961 384.536413 231.130504 0 395.231913-159.308498 395.231913-384.536413C890.31086 256.732961 726.209451 97.4347 495.078946 97.4347z" p-id="21084" fill="#ffffff"></path></svg><span  style="padding-left: 3px"><spring:message code="file.search"/></span></a>
    </div>
    <div id="fac-a" style="display: inline-block;vertical-align:middle;background-color: #FFFACD;border-radius:16px">
    <a href="#" id="file-delete-btn-id" class=""><svg t="1626316577615" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11197" width="16" height="16"><path d="M389.12 757.76V471.04a40.96 40.96 0 0 1 81.92 0v286.72a40.96 40.96 0 0 1-81.92 0z m225.28-102.4a40.96 40.96 0 0 1-40.96-40.96v-143.36a40.96 40.96 0 0 1 81.92 0v143.36a40.96 40.96 0 0 1-40.96 40.96z m0 143.36a40.96 40.96 0 1 1 40.96-40.96 40.96 40.96 0 0 1-40.96 40.96z m266.24-491.52h-20.48v491.52a40.96 40.96 0 0 1-81.92 0V307.2H245.76v491.52a122.88 122.88 0 0 0 122.88 122.88h389.12a122.51136 122.51136 0 0 0 20.48-2.048v2.048a40.96 40.96 0 0 1 0 81.92H327.68a163.84 163.84 0 0 1-163.84-163.84V307.2H143.36a40.96 40.96 0 0 1 0-81.92h163.84a204.8 204.8 0 0 1 409.6 0h163.84a40.96 40.96 0 0 1 0 81.92zM512 102.4a122.88 122.88 0 0 0-122.88 122.88h245.76a122.88 122.88 0 0 0-122.88-122.88z" p-id="11198" fill="#FCA70B"></path></svg><span  style="padding-left: 3px"><spring:message code="file.delete"/></span></a>
        <a href="#" id="file-add-btn-id" class=""><svg t="1626315941547" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9218" width="15" height="15"><path d="M873.411765 481.882353a60.235294 60.235294 0 0 1 120.470588 0v283.467294C993.882353 908.107294 878.953412 1024 736.858353 1024H287.141647C145.046588 1024 30.117647 908.107294 30.117647 765.349647V481.882353a60.235294 60.235294 0 1 1 120.470588 0v283.467294C150.588235 841.788235 211.847529 903.529412 287.141647 903.529412h449.716706C812.152471 903.529412 873.411765 841.788235 873.411765 765.349647V481.882353z" p-id="9219" fill="#FCA70B"></path><path d="M451.764706 60.235294m60.235294 0l0 0q60.235294 0 60.235294 60.235294l0 602.352941q0 60.235294-60.235294 60.235295l0 0q-60.235294 0-60.235294-60.235295l0-602.352941q0-60.235294 60.235294-60.235294Z" p-id="9220" fill="#FCA70B"></path><path d="M508.988235 170.345412L338.522353 340.751059a60.235294 60.235294 0 0 1-85.172706-85.172706L466.401882 42.586353a60.235294 60.235294 0 0 1 85.172706 0l212.931765 212.992a60.235294 60.235294 0 1 1-85.172706 85.172706L508.988235 170.345412z" p-id="9221" fill="#FCA70B"></path></svg><span  style="padding-left: 3px"> <spring:message code="file.add"/></span></a>
        <a href="#" id="file-download-btn-id" class=""><svg t="1626316640607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12912" width="16" height="16"><path d="M828.975746 894.125047 190.189132 894.125047c-70.550823 0-127.753639-57.18542-127.753639-127.752616L62.435493 606.674243c0-17.634636 14.308891-31.933293 31.93227-31.933293l63.889099 0c17.634636 0 31.93227 14.298658 31.93227 31.933293l0 95.821369c0 35.282574 28.596292 63.877843 63.87682 63.877843L765.098927 766.373455c35.281551 0 63.87682-28.595268 63.87682-63.877843l0-95.821369c0-17.634636 14.298658-31.933293 31.943526-31.933293l63.877843 0c17.634636 0 31.933293 14.298658 31.933293 31.933293l0 159.699212C956.729385 836.939627 899.538849 894.125047 828.975746 894.125047L828.975746 894.125047zM249.938957 267.509636c12.921287-12.919241 33.884738-12.919241 46.807049 0l148.97087 148.971893L445.716876 94.89323c0-17.634636 14.300704-31.94762 31.933293-31.94762l63.875796 0c17.637706 0 31.945573 14.312984 31.945573 31.94762l0 321.588299 148.97087-148.971893c12.921287-12.919241 33.875528-12.919241 46.796816 0l46.814212 46.818305c12.921287 12.922311 12.921287 33.874505 0 46.807049L552.261471 624.930025c-1.140986 1.137916-21.664416 13.68365-42.315758 13.69286-20.87647 0.010233-41.878806-12.541641-43.020816-13.69286L203.121676 361.13499c-12.922311-12.933567-12.922311-33.884738 0-46.807049L249.938957 267.509636 249.938957 267.509636z" p-id="12913" fill="#FCA70B"></path></svg><span  style="padding-left: 2px"><spring:message code="file.download"/></span></a>
        <a href="#" id="file-copy-btn-id" class=""><svg t="1626316702316" class="icon" viewBox="0 0 1137 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13849" width="16" height="16"><path d="M796.444444 0H113.777778a113.777778 113.777778 0 0 0-113.777778 113.777778v568.888889a113.777778 113.777778 0 0 0 113.777778 113.777777V113.777778h796.444444a113.777778 113.777778 0 0 0-113.777778-113.777778z" p-id="13850" fill="#FCA70B"></path><path d="M1016.604444 227.555556H348.728889A121.742222 121.742222 0 0 0 227.555556 349.866667v551.822222A121.742222 121.742222 0 0 0 348.728889 1024h667.875555A121.742222 121.742222 0 0 0 1137.777778 901.688889v-551.822222A121.742222 121.742222 0 0 0 1016.604444 227.555556zM1024 910.222222H341.333333V341.333333h682.666667z" p-id="13851" fill="#FCA70B"></path><path d="M568.888889 682.666667h56.888889v56.888889a56.888889 56.888889 0 0 0 113.777778 0v-56.888889h56.888888a56.888889 56.888889 0 0 0 0-113.777778h-56.888888V512a56.888889 56.888889 0 0 0-113.777778 0v56.888889h-56.888889a56.888889 56.888889 0 0 0 0 113.777778z" p-id="13852" fill="#FCA70B"></path></svg><span  style="padding-left: 3px"><spring:message code="file.copy"/></span></a>
        <a href="#" id="file-add-floder-id" class=""><svg t="1626316865714" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16707" width="16" height="16"><path d="M344 617.7h136v136c0 17.7 14.3 32 32 32s32-14.3 32-32v-136h136c17.7 0 32-14.3 32-32s-14.3-32-32-32H544v-136c0-17.7-14.3-32-32-32s-32 14.3-32 32v136H344c-17.7 0-32 14.3-32 32s14.3 32 32 32z" p-id="16708" fill="#FCA70B"></path><path d="M926.9 80.4c-16.9-10.7-38.7-16.6-61.3-16.6h-592c-22.7 0-44.5 5.9-61.3 16.6-21.1 13.4-33.1 33.5-33.1 55.1v70.3h-31c-45.2 0-82 36.8-82 82V879c0 45.2 36.8 82 82 82h730c45.2 0 82-36.8 82-82V135.5c-0.2-21.7-12.3-41.7-33.3-55.1zM243 137.1c2.6-3 12.9-9.4 30.5-9.4h592c17.5 0 27.9 6.4 30.5 9.4v68.7H243v-68.7zM896 879c0 9.9-8.1 18-18 18H148c-9.9 0-18-8.1-18-18V287.8c0-9.9 8.1-18 18-18h748V879z" p-id="16709" fill="#FCA70B"></path></svg><span  style="padding-left: 3px"><spring:message code="file.folder"/></span></a>
        <a href="#" id="file-move-id" class=""><svg t="1626316821275" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16308" width="16" height="16"><path d="M949.527273 432.872727l-111.709091-111.709091c-13.963636-13.963636-37.236364-13.963636-51.2 0-13.963636 13.963636-13.963636 37.236364 0 51.2l97.745454 97.745455h-335.127272V139.636364l97.745454 97.745454c9.309091 9.309091 18.618182 9.309091 27.927273 9.309091s18.618182-4.654545 27.927273-9.309091c13.963636-13.963636 13.963636-37.236364 0-51.2l-111.709091-111.709091c-41.890909-41.890909-111.709091-41.890909-153.6 0L325.818182 186.181818c-13.963636 13.963636-13.963636 37.236364 0 51.2 13.963636 13.963636 37.236364 13.963636 51.2 0l97.745454-97.745454v335.127272H139.636364l97.745454-97.745454c13.963636-13.963636 13.963636-37.236364 0-51.2-13.963636-13.963636-37.236364-13.963636-51.2 0l-111.709091 111.709091c-18.618182 18.618182-32.581818 46.545455-32.581818 79.127272s9.309091 55.854545 32.581818 79.127273l111.709091 111.709091c9.309091 9.309091 18.618182 9.309091 27.927273 9.309091s18.618182-4.654545 27.927273-9.309091c13.963636-13.963636 13.963636-37.236364 0-51.2l-97.745455-97.745454h335.127273v325.818181l-97.745455-97.745454c-13.963636-13.963636-37.236364-13.963636-51.2 0-13.963636 13.963636-13.963636 37.236364 0 51.2l111.709091 111.709091c18.618182 18.618182 46.545455 32.581818 79.127273 32.581818 27.927273 0 55.854545-9.309091 79.127273-32.581818l111.709091-111.709091c13.963636-13.963636 13.963636-37.236364 0-51.2s-37.236364-13.963636-51.2 0l-97.745455 97.745454v-335.127272H884.363636l-97.745454 97.745454c-13.963636 13.963636-13.963636 37.236364 0 51.2 9.309091 9.309091 18.618182 9.309091 27.927273 9.309091s18.618182-4.654545 27.927272-9.309091l111.709091-111.709091c18.618182-18.618182 32.581818-46.545455 32.581818-79.127272-4.654545-23.272727-18.618182-51.2-37.236363-74.472728z" p-id="16309" fill="#FCA70B"></path></svg><span  style="padding-left: 3px"><spring:message code="file.move"/></span></a>
        <a href="#" id="file-share-btn-id" class=""><svg t="1626316916767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20056" width="15" height="15"><path d="M959.525926 517.562469c34.740148 0 63.159309 28.41916 63.955753 63.159309v254.230123c0 104.207802-84.486321 188.681481-188.694123 188.681482H200.805136C96.597333 1023.633383 12.136296 939.172346 12.136296 834.939259V200.969481C12.123654 96.761679 96.584691 12.275358 200.805136 12.275358h253.433679a63.336296 63.336296 0 0 1 63.159308 63.159309 63.336296 63.336296 0 0 1-63.159308 63.159308H200.805136c-34.727506 0-62.362864 28.431802-62.362864 62.375506v633.185976c0 34.740148 28.41916 62.375506 62.362864 62.375506H833.991111c34.740148 0 62.375506-28.431802 62.375506-62.375506V580.721778A63.336296 63.336296 0 0 1 959.525926 517.562469z m0-505.287111c34.740148 0 63.159309 28.41916 63.955753 63.159309v252.649876a63.336296 63.336296 0 0 1-63.171951 63.159309 63.336296 63.336296 0 0 1-63.159308-63.159309V227.808395l-428.689383 428.702025c-12.641975 11.845531-28.431802 18.166519-45.005432 18.166518-16.586272 0-32.363457-5.524543-45.005432-18.166518-24.474864-24.474864-24.474864-64.726914 0-89.21442l428.689383-428.689383h-100.250865a63.336296 63.336296 0 0 1-63.159308-63.17195A63.336296 63.336296 0 0 1 706.888691 12.275358H959.525926z" p-id="20057" fill="#FCA70B"></path></svg><span  style="padding-left: 3px"><spring:message code="file.share"/></span></a>
    </div>
</div>

<%--<div>--%>
<%--    <nav  class="navbar-collapse collapse" >--%>
<%--        <ul class="nav navbar-nav fa-ul">--%>
<%--            <li>--%>
<%--                <a id="file-add-btn-id" href="#" class="btn-primary">--%>
<%--                    <i class="glyphicon glyphicon-cloud-upload"> </i>--%>
<%--                    <span><spring:message code="file.add"></spring:message></span>--%>
<%--                </a>--%>
<%--            </li>--%>
<%--            <li><a></a></li>--%>
<%--            <li>--%>
<%--                <a id="file-download-btn-id" href="#" class="btn-primary">--%>
<%--                    <i class="glyphicon glyphicon-cloud-download"> </i>--%>
<%--                    <span><spring:message code="file.download"></spring:message></span>--%>
<%--                </a>--%>
<%--            </li>--%>
<%--            <li><a></a></li>--%>
<%--            <li>--%>
<%--                <a id="add-folder-btn-id" href="#" class="btn-primary">--%>
<%--                    <i class="glyphicon glyphicon-plus"> </i>--%>
<%--                    <span><spring:message code="folder.add"></spring:message></span>--%>
<%--                </a>--%>
<%--            </li>--%>
<%--            <li><a></a></li>--%>
<%--            <li>--%>
<%--                <a id="file-delete-btn-id" href="#" class="btn-primary">--%>
<%--                    <i class="glyphicon glyphicon-trash"> </i>--%>
<%--                    <span><spring:message code="file.delete"></spring:message></span>--%>
<%--                </a>--%>
<%--            </li>--%>
<%--            <li><a></a></li>--%>
<%--            <li>--%>
<%--                <a id="file-search-btn-id" href="#" class="btn-primary">--%>
<%--                    <i class="glyphicon glyphicon-search"> </i>--%>
<%--                    <span><spring:message code="file.search"></spring:message></span>--%>
<%--                </a>--%>
<%--            </li>--%>
<%--            <li><a></a></li>--%>
<%--            <li>--%>
<%--                <a id="file-copy-btn-id" href="#" class="btn-primary">--%>
<%--                    <i class="glyphicon glyphicon-copy"> </i>--%>
<%--                    <span><spring:message code="file.copy"></spring:message></span>--%>
<%--                </a>--%>
<%--            </li>--%>
<%--            <li><a></a></li>--%>
<%--        </ul>--%>
<%--    </nav>--%>
<%--</div>--%>
<div style="background-color: white">
<table id="flexiGridID" style="display: block;margin: 0px;">

</table>
</div>
<%--<div id="share-id" style="display: none">--%>
<%--	   <textarea id="share-tips-id" rows="4" cols="10" style="width: 367px;height: 134px">--%>

<%--	   </textarea>--%>
<%--</div>--%>

<div id="add-file-dialog-id" style="display: none">
    <form id="add-file-form-id" action="${pageContext.request.contextPath}/file/addFile" method="post" enctype="application/x-www-form-urlencoded">
<%--            <div class="form-group">--%>
<%--                <span for="add-file-name-id"><spring:message code="file.name"></spring:message></span>--%>
<%--                <input class="form-control" type="text" name="fileName" id="add-file-name-id"/>--%>
<%--            </div>--%>
            <div class="form-group">
                <span for="add-file-path-id"><spring:message code="file.choose.name"></spring:message></span>
                <input class="form-control" type="file" name="filePath" id="add-file-path-id"/>
            </div>
        </form>
    </div>
    </form>
</div>

<div id="previewWindow"
     style="
		 	display: none;
			background-color: rgb(255,255,255);
			/*border:1px solid #000;*/
			position: absolute;
			margin: auto;
			top: 0;bottom: 0;left: 0;right: 0;
			width: 1024px;
			min-height: 25%;
			z-index: 99999;
			/*效果*/
			border-radius: 10px;
			box-shadow: 2px 2px  8px rgba(0,5,10,0.4);">
<%--    <div id="previewInfo"--%>
<%--         style="height: 25px;background-color: 	#E6E6FA;text-align: center;line-height: 25px;">--%>

<%--    </div>--%>

    <div id="previewImage" align="center">
        <p>图片</p>
        <div id="ImgDiv" style="width: 924px;height: 519px;object-fit: contain;background:  rgba(0,5,10,0.4)">
            <img id="preImageSrc" src="" style="width: inherit;height:inherit;object-fit: scale-down">
        </div>

    </div>

    <div id="previewVideo" align="center">
        <p>视频</p>
        <div id="videoDiv" style="width: 924px;height: 519px;object-fit: contain">
            <video id="preVideoSrc" src="" controls="controls" style="width: 100%;height:100%;object-fit: contain">
                您的浏览器不支持 video 标签。
            </video>
        </div>
    </div>

    <div id="previewAudio" style="" align="center">
        <p>音频</p>
        <div id="audioDiv"
             style="margin:0 auto;
				 display:table;">
            <audio id="preAudioSrc" controls>
                您的浏览器不支持 audio 元素。
            </audio>
        </div>
    </div>

    <div id="previewDoc" align="center" style="width: 100%;height: 85%;background:  rgba(0,5,10,0.4)">
        <p>Office文档</p>
        <iframe id="preDocSrc" src="" width='100%' height='100%' frameborder='1'>
        </iframe>
    </div>

    <div id="previewText" align="center" >
        <p>文本</p>
        <iframe id="preTextSrc" src="" style="width:100%; height:490px" ></iframe>
    </div>

    <div id="previewUnknown" align="center">
        <span style="font-size: large;">不支持的文件！</span>
    </div>

    <div id="previewButton"
         align="center";>
        <button onclick="closePreview()"
                style="background-color: transparent;
                border: 0;
                outline: none;
                height: 55px;
                width: 100%;
                background-color:	#E6E6FA;
                color: #7B68EE;
                font-size: 16px;">关闭预览</button>
    </div>


</div>

<div id="add-folder-dialog2-id"  style="display: none">
    <form id="add-floder-form-id"  action="${pageContext.request.contextPath}/file/addFloder"  method="post" enctype="application/x-www-form-urlencoded">
        <span for="add-folder-dialog2-id"><spring:message code="folder.name"></spring:message></span>
        <input id="add-floderName-id" class="form-control" type="text" name="floderName"/>
    </form>
</div>
<div id="updateNameDialog" style="display: none;">
    <form id="updateNameFormId" action="${pageContext.request.contextPath}/file/updateFile" method="post" >
        <input type="hidden" id="update-old-file-name-id" name="oldFileName" />
        <!-- hidden -->
        <table >
            <tr>
                <td class="fileName">
                    <label><spring:message code="file.name"/></label>
                </td>
                <td class="fileValue" >
                    <input type="text" id="update-new-file-name-id" name="newFileName" />
                    <span class="mand">*</span>
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="move-file-dialog-id"  style="display: none">
    <form id="move-file-form-id"  action="${pageContext.request.contextPath}/file/moveFile"  method="post" enctype="application/x-www-form-urlencoded">
        <span for="add-folder-dialog-id"><spring:message code="folder.name"></spring:message></span>
        <input id="move-floderName-id" class="form-control" type="text" name="moveFloderName"/>
        <input id="move-fileName"  type="value" name="moveFileName" style="display: none"/>
    </form>
</div>

</body>
</html>